<template>
  <div class="dashboard">
    <h2>dashboard</h2>
    <a-button type="primary">Primary Button</a-button>
    <a-button>Default Button</a-button>
    <a-button type="dashed">Dashed Button</a-button>
    <a-button type="text">Text Button</a-button>
    <a-button type="link">Link Button</a-button>
  </div>
  <div :style="{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }">
    <a-button type="primary" ghost>Primary</a-button>
    <a-button ghost>Default</a-button>
    <a-button type="dashed" ghost>Dashed</a-button>
    <a-button danger ghost>Danger</a-button>
    <a-button type="link" ghost>Link</a-button>
  </div>

  <button @click="kaishi">开始</button>

  <div class="progress-container">
    <div
      class="progress-bar"
      :style="{
        width: number * 100 + '%',
        backgroundColor:
          number >= 1 ? '#1890ff' : `rgba(33, 204, 41, ${0.3 + number * 0.7})`
      }"
    ></div>
  </div>
</template>

<script setup lang="ts" name="dashboard">
import { ref } from 'vue'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css' // 这是 NProgress 的默认样式
const number = ref(0)
let timer: number | null = null // 添加定时器引用
function kaishi() {
  console.log('kaishi')
  number.value = 0 // 重置进度
  NProgress.start()
  // NProgress.set(0.8)
  // 清除可能存在的旧定时器
  if (timer) clearInterval(timer)

  // 完成进度条
  timer = setInterval(() => {
    NProgress.set(number.value)
    if (number.value < 1) {
      number.value += 0.1
    } else {
      NProgress.done()
      clearInterval(timer!) // 清除定时器
      timer = null
    }
  }, 1000)
}
// 启动进度条
// NProgress.start()

// 增加进度条（0.1 到 1.0 之间的任何值）

// 随机增加进度条（这里使用了内部算法来确定增加的量）
// NProgress.inc()

// 完成进度条
// NProgress.done()

// import 'ant-design-vue/lib/button/style'
</script>

<style scoped>
.dashboard {
}
/* NProgress 样式覆盖 */
:global(#nprogress .bar) {
  background: #21cc29 !important; /* 设置进度条颜色，这里使用 Ant Design Vue 的主题蓝色 */
  height: 4px !important; /* 修改进度条宽度，默认是 2px */
}

:global(#nprogress .peg) {
  box-shadow:
    0 0 10px #1bf01b,
    0 0 5px #0bdd51 !important;
}

:global(#nprogress .spinner-icon) {
  border-top-color: #19e234 !important;
  border-left-color: #0ed391 !important;
}
.progress-container {
  width: 100%;
  height: 10px;
  background-color: #f0f0f0;
  border-radius: 5px;
  margin-bottom: 10px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background-color: #21cc29;
  transition: width 0.3s ease-in-out;
}
.progress-bar {
  height: 100%;
  transition:
    width 0.3s ease-in-out,
    background-color 0.3s ease-in-out;
}
</style>
